<template>
  <div id="app">
     <!-- 设置路由坑 -->
   <router-view></router-view>

   <!-- v-show="$route.meta.isshowtanbar"  这是设置下面的导航的显示的 根据在路由中设置的  meat属性 -->
 <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" :route="true" @change='changeFn()' :placeholder="true" v-show="$route.meta.isshowtanbar">
  <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item to="/topic" icon="label-o">专题</van-tabbar-item>
  <van-tabbar-item to="/category" icon="apps-o">分类</van-tabbar-item>
  <van-tabbar-item to="/car" icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item to="/user" icon="friends-o">我的页</van-tabbar-item>
  </van-tabbar>
    
  
   <!-- 设置路由的在页面中的显示 -->

  </div>
</template>

<script>
// 导入轮播图的组件
// import Swipe from "@/views/Swipe.vue"
// import instance from "@/utils/request"
export default {
  name: 'App',
  data(){
   return {
   active:0,
   }
  },
  created(){
    // console.log(this.active);
  },
  components: {
   
  },
  methods: {
    changeFn(active){
      console.log(active);
      this.active=active  //这里是将点击的导航的值,赋值给导航所依赖的下标
      
    }
  }
 
}
</script>
<!-- 使用less书写css样式   语法 lang='less'-->
<style lang="less">

</style>
